<template>
  <div>
    <div class="space"></div>

    <div class="recommend">
      <img class="recommend_icon" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png"
      alt="本周热门"/>
      <span class="recommend_title">热销推荐</span>
      <a class="recommend_more" href="">更多
        <span class="iconfont iconfont_more">&#xe62d;</span>
      </a>
    </div>

    <ul>
      <li class="border-bottom" v-for="item of rlist" :key="item.id">
        <a class="top_item" :href="item.href">
          <img class="top_item_img" :src="item.imgUrl"/>
          <div class="top_item_info">
            <p class="info_title">{{item.title}}</p>
            <p class="info_desc">
              <span class="iconfont iconfont_location">&#xe611;</span>
              {{item.desc}}</p>
            <p class="info_price">
              <span class="a">￥</span>
              <em class="b">{{item.price}}</em>
              起
              <span class="c">{{item.loca}}</span>
            </p>
          </div>
        </a>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props:{
    rlist:Array
  }
}
</script>

<style lang="stylus" scoped>
.space
  width 100%
  height .2rem
  background #eeeeee
.recommend
  width 100%
  height .5rem
  padding .24rem 0 0.26rem 0
  .recommend_icon
    width .35rem
    height .35rem
    margin-left .13rem
    overflow hidden
    float left
  .recommend_title
    font-size .35rem
    float left
  .recommend_more
    float right
    margin-right .13rem
    line-height .4rem
    .iconfont_more
      font-size .2rem
.top_item
  color #000
  display flex
  overflow hidden
  height 1.9rem
  margin .1rem 0
  .top_item_img
    width 1.7rem
    height 1.7rem
    padding .1rem
  .top_item_info
    flex 1
    padding .1rem
    min-width 0
    .info_title
      font-size .32rem
      line-height .54rem
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    .info_desc
      font-size .28rem
      line-height .4rem
      color #999
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      .iconfont_location
        font-size .25rem
    .info_price
      .a
        font-size .23rem
        color red
      .b
        font-size .4rem
        color red
      .c
        color #333
        font-size .3rem
        float right
        padding-right .1rem



</style>
